const { Form, Select, Input, Button ,Radio} = antd;
const { Option } = Select;
const { TextArea } = Input;
const MiApiForm = Form.create({})(
  class extends React.Component {
    componentWillMount () {
     
     }
/**
   * form表单渲染
   */
  renderFormItem = (configTemplate) => {
    const { getFieldDecorator } = this.props.form;
    const formItem = configTemplate.map((item, index) => {
      if (!item.dateFormat) {
        return null;
      }
      let pattern = {};
      let required = true;
      const FormId = 'api.' + item.key;
      if (item.dateFormat.regExpression) {
        item.dateFormat.regExpression.pattern = new RegExp(item.dateFormat.regExpression.pattern);
        pattern = item.dateFormat.regExpression;
      }
      if (item.dateFormat.required === false) {
        required = false;
      }
      if (item.dateFormat.dateType === 'Enum') {
        return (
          <Form.Item label={item.note} key={index}>
            {getFieldDecorator(FormId, {
              initialValue: item.value || undefined,
              rules: [
                {
                  required: required,
                  message: `请选择${item.note}`,
                },
              ],
            })(
              <Select placeholder={'请选择' + item.note}>
                {(item.dateFormat.selectList || []).map(item => (
                  <Option key={item.value} value={item.value}>
                    {item.name}
                  </Option>
                ))}
              </Select>,
            )}
          </Form.Item>
        );
      } else if (item.dateFormat.dateType === 'Bool'){
        return (
          <Form.Item label={item.note} key={index}>
            {getFieldDecorator(FormId, { initialValue:item.value, valuePropName: 'checked' })(<Switch checkedChildren="是" unCheckedChildren="否" />)}
          </Form.Item>
        );
      }else if (item.dateFormat.dateType === 'Number') {
        return (
          <Form.Item label={item.note} key={index}>
            {getFieldDecorator(FormId, {
              initialValue: item.value || undefined,
              rules: [
                {
                  required: required,
                  message: `请输入${item.note}`,
                },
              ],
            })(<InputNumber placeholder={'请输入' + item.note} />)}
          </Form.Item>
        );
      } else {
        return (
          <Form.Item label={item.note} key={index}>
            {getFieldDecorator(FormId, {
              initialValue: item.value || undefined,
              rules: [
                {
                  required: required,
                  message: `请输入${item.note}`,
                },
                {
                  ...pattern,
                },
              ],
            })(<Input placeholder={'请输入' + item.note} />)}
          </Form.Item>
        );
      }
    });
    // console.log(formItem, 'formItem');
    return (
      <Form>
        {formItem}
        {/* <Form.Item label="描述">
          {getFieldDecorator('description', {
            rules: [
              {
                required: false,
                message: '请输入描述',
              },
            ],
          })(<TextArea maxLength={50} placeholder="请输入描述" autoSize={{ minRows: 3 }} />)}
        </Form.Item> */}
      </Form>
    );
  };

    render() {
      let { visible, onCancel, onCreate, form,title,configTemplate} = this.props;
      let { getFieldDecorator } = form;
  
      if(title.startsWith("add")){
        configTemplate=configTemplate.filter(u=> u.key!="id")
      }
      return (
        <Modal
          visible={visible}
          title={title}
          okText="ok"
          onCancel={onCancel}
          onOk={onCreate}
        >
        <Form onSubmit={this.handleSubmit}>
        {this.renderFormItem(configTemplate)}
      </Form>
        </Modal>
      );
    }
  },
);

